<template>
  <div id="components-layout-demo-basic">
    <a-layout>
      <a-layout-header>
        <a-row class="a-row">
          <a-col class="a-col" :md="6" :span="11">
        <img src="../assets/images/logo.png" class="logo"   @click="home"/>
  
          </a-col>
          <a-col class="a-col" style="text-align: left" :md="15" :span="10">      
            <div class="wai">                
              <div
              class="parent"
              :style="{ color: count == index ? CoLor : '#FFF' }"
               @click="listChildren(index)"
                @mouseenter="info(index)"
                @mouseleave="hid(index)"
                v-for="(item, index) in pagesList"
                :key="index"
              >
                <span class="shang" :style="{ borderBottom:count == index ?  bre : 'none' }"  >{{ item.meta.title }}</span>
                         
                <div

                   style="background: #333333;
                          text-align: center;
                          width: 100%;
                          position: relative;
                          z-index: 9999;  cursor: pointer;"
                  :style="{ display: count == index ? hide : 'none' }"
                >
                <!-- style="color:#fff" -->
                  <div
                   class="child"
                   
                    v-for="(item, index) in item.children"
                    :key="index"
                    @click='seleter(index,item.path)'
                  >
                   {{  item.meta.title }}
                  </div>
                            
                </div>
                              
              </div>
                  
            </div>
          </a-col>
          <a-col class="a-col" :md="2" :span="3">
            <span>登录</span>
          <img src="../assets/images/avatar.png" alt="">
          </a-col>
        </a-row>
      </a-layout-header>
      <a-layout>
        <a-layout-content>
 <div class="order"> 当前位置：{{bread}} > 图书管理 </div>
          <transition name="fade" mode="out-in">
            <router-view v-wechat-title='$route.meta.title'></router-view>
          </transition>

 
          
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import { list } from "../api/admin";
export default {
  name: "Home",
  data() {
    return {
      bread:'首页',
      componentId: "",
      count: 0,
      counts: 0,
      pagesList: [],
      children: [],
      serial: "",
      hide: "none",
    bre:'none',
    CoLor:'#fff'
    };
  },
  mounted() {
    this.pagesInit();
  },
  watch:{
    $route(to,from){
      console.log(to)
      console.log(from)
    }
  },
  methods: {
    info(index) {
       this.count = index
       this.hide = 'block'
      this.CoLor = '#f8b551'
     this.bre = '2px solid #f8b551'
    },
  
    hid(index) {
      // this.counts = index;
      this.hide = "none";
       this.CoLor = '#fff'
    },
    pagesInit() {
      list().then((res) => {
        this.pagesList = res.returnvalue;
      });
    },
    listChildren(index) {
      this.serial = index;
      this.children = this.pagesList[index].children;
    },
//首页路由
    home(){
      this.$router.push({path:'/home'})
    },
    //子路由
    seleter(index,path){
      this.$router.push({ path })
    },
    information(index) {
      this.counts = index;
      if (this.serial == 1) {
        if (index == 1) {
          this.componentId = "dataManagement";
        }
      } else if (this.serial == 2) {
        if (index == 1) {
          this.componentId = "menumanager";
        }
      }
    },
  },
};
</script>
<style scoped>
.logo {
  display: inline-block;
  width: 183px;
  height: 43.50px;
  line-height: 50px;
}
.order {
  margin-top:10px ;
  text-align: left;
  width: 80%;
  margin-left: 200px;
  height: 25px;
  box-sizing: border-box;
  line-height: 25px;
}
.wai {
  display: flex;
  justify-content: flex-start;
}
.child {
  color: #fff;
}
.child:hover {
  color: sandybrown;
}
.parent {
  color: #FFF;
  font-size: 18px;
display: block;
margin: 10px -5px;
width: 150px;
line-height: 40px;
  cursor: pointer;
  /* border: 1px solid red; */
  text-align: center;
}

.parent:hover{
  color: sandybrown;
}
.shang{
/* border: 1px solid #f8b551; */
width: 100px;
margin-bottom: 15px;
text-align: center;
display: inline-block;

}

.fade-enter {
 opacity:0;
}
.fade-leave{
 opacity:1;
}
.fade-enter-active{
 transition:opacity .5s;
}
.fade-leave-active{
 opacity:0;
 transition:opacity .5s;
}
.a-row { 
  height: 100%;
  box-sizing: border-box;
}
.a-col {
  box-sizing: border-box;
  height: 100%;

}


.active {
  font-family: MicrosoftYaHei;
  font-size: 18px;
  font-weight: bold;
  font-stretch: normal;
  border-bottom: 2px solid #f8b551;
  color: #f8b551;
  cursor: pointer;
  padding: 10px 0;
  text-align: center;
}
.active2 {
  font-family: MicrosoftYaHei;
  font-size: 18px;
  font-weight: bold;
  font-stretch: normal;
  color: #f8b551;
  cursor: pointer;
}
.active {
  display: none;
}
.tags:last-child {
  margin-right: 0;
}
.leftColor {
  color: #3ba0e9;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

#components-layout-demo-basic {
  text-align: center;
}
#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  background: #333333;
  color: #fff;
  text-align: center;
}
#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}
#components-layout-demo-basic .ant-layout-sider {
  background: #fff;
  color: #fff;

  box-sizing: border-box;
}
#components-layout-demo-basic .ant-layout-content {
  /* min-height: 120px;
  line-height: 30px; */
  box-sizing: border-box;
}
#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
  box-sizing: border-box;
}
#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}
</style>